﻿@{
    ViewBag.Title = this.Context.Request.QueryString["title"];
    Layout = "~/Views/Shared/_PageLayout.cshtml";
}

@section scripts
{
    @Scripts.Render("~/Scripts/swfupload")
    <script type="text/javascript">

        //挂接ExtJS准备完毕事件
        Ext.onReady
        (
            function ()
            {
                //初始化快速提示
                Ext.QuickTips.init();

                //设置状态保存提供者（当前设置为Cookie）
                Ext.state.Manager.setProvider( Ext.create( 'Ext.state.CookieProvider', { path: _StatePath } ) );

                //用于记录当前记录
                var _CurrentRecord = undefined;

                //创建数据存储对象
                var store = Ext.create
                (
                    'Ext.data.Store',
                    {
                        pageSize: 20,
                        autoSync: false,
                        autoLoad: false,
                        root: 'data',
                        remoteFilter: true,
                        remoteSort: true,
                        sorters: [{ property: 'Component_Code', direction: 'ASC' }],
                        model: 'Component',
                        listeners:
                        {
                            //处理数据开始加载事件
                            beforeload: function ( store, operation, eOpts )
                            {
                                //收缩所有展开的行
                                plugin.collapseAll();
                            },
                            //处理数据加载事件
                            load: function ( store, records, successful, eOpts )
                            {
                                //判断是否已经初始化
                                if ( spms.common.IsValid( grid ) )
                                {
                                    //获得当前选中行
                                    var models = grid.getSelectionModel().getSelection();

                                    //判断是否选中数据
                                    if ( models.length > 0 )
                                    {
                                        //设置当前选中记录
                                        _CurrentRecord = store.getById( models[0].getId() );
                                    }
                                    else
                                    {
                                        //设置当前选中记录
                                        _CurrentRecord = null;
                                    }

                                    //更新按钮状态
                                    UpdateButtonState( _CurrentRecord );
                                }
                            }
                        },
                        proxy:
                        {
                            type: 'ajax',
                            batchActions: false,
                            url: spms.url.Action( 'List', 'Component' ),
                            reader:
                            {
                                type: 'json',
                                root: 'data'
                            },
                            listeners:
                            {
                                //处理代理异常
                                exception: spms.exception.HandleProxyError
                            }
                        }
                    }
                );

                //创建工具栏
                var toolbar = Ext.create
                (
                    'Ext.toolbar.Toolbar',
                    {
                        region: 'north',
                        layout: 'hbox',
                        height: 32,
                        border: '1 0 1 0',
                        margins: '0 0 0 0',
                        padding: '0 6 0 6',
                        items:
                        [
                            {
                                id: 'spms-cmd-refresh',
                                text: '刷新',
                                tooltip: '重新加载数据',
                                tooltipType: 'title',
                                iconCls: 'spms-icon-refresh',
                                cls: 'spms-page-menu-button',
                                listeners:
                                {
                                    click: OnRefresh
                                }
                            },
                            '-',
                            {
                                id: 'spms-cmd-add',
                                text: '新增',
                                tooltip: '新增元器件',
                                tooltipType: 'title',
                                cls: 'spms-page-menu-button',
                                iconCls: 'spms-icon-add',
                                listeners:
                                {
                                    click: OnAdd
                                }
                            },
                            {
                                id: 'spms-cmd-remove',
                                text: '删除',
                                tooltip: '删除选中的元器件',
                                tooltipType: 'title',
                                cls: 'spms-page-menu-button',
                                iconCls: 'spms-icon-delete',
                                disabled: true,
                                listeners:
                                {
                                    click: OnRemove
                                }
                            },
                            {
                                id: 'spms-cmd-edit',
                                text: '编辑',
                                tooltip: '编辑选中的元器件',
                                tooltipType: 'title',
                                cls: 'spms-page-menu-button',
                                iconCls: 'spms-icon-edit',
                                disabled: true,
                                listeners:
                                {
                                    click: OnEdit
                                }
                            },
                            '-',
                            {
                                id: 'spms-cmd-view',
                                text: '查看',
                                tooltip: '查看选中的元器件',
                                tooltipType: 'title',
                                cls: 'spms-page-menu-button',
                                iconCls: 'spms-icon-view',
                                disabled: true,
                                listeners:
                                {
                                    click: OnView
                                }
                            }
                        ]
                    }
                );

                //创建检索面板
                var search = Ext.create
                (
                    'Ext.panel.Panel',
                    {
                        region: 'north',
                        frame: false,
                        animCollapse: false,
                        iconCls: 'spms-icon-search',
                        stateful: true,
                        stateId: 'spms-component-search-state',
                        collapsible: true,
                        collapseMode: 'header',
                        titleCollapse: true,
                        collapsed: true,
                        margin: '0 0 6 0',
                        layout: 'fit',
                        id: 'spms-panel-search',
                        cls: 'spms-page-card-detail',
                        border: true,
                        title: '检索',
                        listeners:
                        {
                            //挂接显示事件
                            show: function ( win, eOpts )
                            {
                                //获得表单
                                var form = win.down( 'form' );

                                //判断是否存在
                                if ( form )
                                {
                                    //获得窗体
                                    form.getForm().reset();

                                    //设置焦点
                                    form.down( 'field' ).focus( false, 50 );
                                }
                            }
                        },
                        items:
                        [
                            {
                                xtype: 'form',
                                frame: false,
                                autoScroll: true,
                                bodyPadding: 6,
                                bodyCls: 'spms-page-card-detail-form-body',
                                bodyBorder: false,
                                border: false,
                                layout:
                                {
                                    type: 'table',
                                    columns: 2,
                                    tableAttrs:
                                    {
                                        style:
                                        {
                                            width: '100%'
                                        },
                                        cellpadding: 6
                                    }
                                },
                                items:
                                [
                                    {
                                        xtype: 'fieldcontainer',
                                        width: '100%',
                                        defaultType: 'textfield',
                                        layout:
                                        {
                                            type: 'hbox',
                                            align: 'stretch'
                                        },
                                        padding: 0,
                                        border: 0,
                                        items:
                                        [
                                            {
                                                fieldLabel: '',
                                                minWidth: 80,
                                                maxLength: 20,
                                                xtype: 'checkbox',
                                                boxLabel: '型号规格:',
                                                cls: 'spms-card-checkbox',
                                                boxLabelCls: 'spms-card-checkbox-boxlabel',
                                                itemId: 'chkComponent_Code',
                                                allowBlank: true,
                                                value: true,
                                                inputValue: true,
                                                listeners:
                                                {
                                                    change: spms.event.OnCheckBoxLabelChange
                                                }
                                            },
                                            {
                                                fieldLabel: '',
                                                itemId: 'Component_Code',
                                                flex: 1
                                            }
                                        ]
                                    },
                                    {
                                        xtype: 'fieldcontainer',
                                        width: '100%',
                                        defaultType: 'textfield',
                                        layout:
                                        {
                                            type: 'hbox',
                                            align: 'stretch'
                                        },
                                        padding: 0,
                                        border: 0,
                                        items:
                                        [
                                            {
                                                fieldLabel: '',
                                                minWidth: 80,
                                                maxLength: 20,
                                                xtype: 'checkbox',
                                                boxLabel: '产品名称:',
                                                cls: 'spms-card-checkbox',
                                                boxLabelCls: 'spms-card-checkbox-boxlabel',
                                                itemId: 'chkComponent_Name',
                                                allowBlank: true,
                                                value: true,
                                                inputValue: true,
                                                listeners:
                                                {
                                                    change: spms.event.OnCheckBoxLabelChange
                                                }
                                            },
                                            {
                                                fieldLabel: '',
                                                itemId: 'Component_Name',
                                                flex: 1
                                            }
                                        ]
                                    }
                                ],
                                dockedItems:
                                [
                                    {
                                        xtype: 'toolbar',
                                        dock: 'bottom',
                                        ui: 'footer',
                                        cls: 'spms-page-card-toolbar',
                                        padding: '0 6 12 0',
                                        items:
                                        [
                                            '->'
                                            ,
                                            {
                                                text: '检索',
                                                xtype: 'button',
                                                cls: 'spms-page-card-detail-toolbar-button',
                                                handler: function ()
                                                {
                                                    //获得当前对象
                                                    var me = this;

                                                    //获得表单对象
                                                    var form = me.up( 'form' );

                                                    //检查数据是否合法
                                                    if ( form.getForm().isValid() )
                                                    {
                                                        //清除过滤条件
                                                        store.filters.clear();

                                                        //生成过滤条件
                                                        var filters = new Array();

                                                        //判断是否以账户名检索
                                                        if ( form.down( '#chkComponent_Code' ).getValue() )
                                                        {
                                                            //添加检索条件
                                                            filters.push( { property: 'Component_Code@C', value: form.down( '#Component_Code' ).getValue() } );
                                                        }

                                                        //判断是否以职员名检索
                                                        if ( form.down( '#chkComponent_Name' ).getValue() )
                                                        {
                                                            //添加检索条件
                                                            filters.push( { property: 'Component_Name@C', value: form.down( '#Component_Name' ).getValue() } );
                                                        }

                                                        //过滤数据
                                                        store.reload( { filters: filters } );
                                                    }
                                                }
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                );

                //创建插件
                var plugin = Ext.create
                (
                    'SPMS.RowExpander',
                    {
                        expandOnDblClick: false,
                        rowBodyTpl:
                        [
                            '<div id="{Component_ID}" class="spms-row-expand-body" />'
                        ]
                    }
                );

                //创建表格
                var grid = Ext.create
                (
                    'Ext.grid.Panel',
                    {
                        region: 'center',
                        store: store,
                        stateful: true,
                        border: true,
                        cls: 'spms-grid',
                        stateId: 'spms-component-grid-state',
                        id: 'spms-card-grid',
                        forceFit: true,
                        autoScroll: true,
                        columnLines: true,
                        enableLocking: false,
                        unlockText: spms.resources.text_grid_column_unlock,
                        lockText: spms.resources.text_grid_column_lock,
                        plugins:
                        [
                            plugin
                        ],
                        viewConfig:
                        {
                            stripeRows: true,
                            loadingText: spms.resources.text_loading,
                            singleSelect: true
                        },
                        bbar: Ext.create
                        (
                            'SPMS.PagingToolbar',
                            {
                                store: store
                            }
                        ),
                        listeners:
                        {
                            select: OnRowSelect
                        },
                        columns:
                        [
                            {
                                text: '型号规格',
                                width: 80,
                                minWidth: 80,
                                sortable: true,
                                align: 'left',
                                dataIndex: 'Component_Code',
                                hideable: false,
                                lockable: false
                            },
                            {
                                text: '器件标识',
                                width: 80,
                                minWidth: 80,
                                sortable: true,
                                align: 'left',
                                dataIndex: 'Component_Mark',
                                hideable: false,
                                lockable: false
                            },
                            {
                                text: '产品名称',
                                width: 120,
                                minWidth: 120,
                                sortable: true,
                                align: 'left',
                                dataIndex: 'Component_Name',
                                hideable: false,
                                lockable: false
                            },
                            {
                                text: '生产厂家',
                                width: 120,
                                minWidth: 120,
                                sortable: true,
                                align: 'left',
                                dataIndex: 'Manufactor_Name',
                                xtype: 'templatecolumn',
                                hideable: false,
                                lockable: false,
                                tpl: '<a href="#" onclick="spms.common.Detail( {url:\'{Manufactor_Url}\', title:\'{Manufactor_Name}\'} );">{Manufactor_Name}</a>'
                            },
                            {
                                text: '封装方式',
                                width: 120,
                                minWidth: 120,
                                sortable: true,
                                align: 'left',
                                dataIndex: 'Packaging_Name',
                                xtype: 'templatecolumn',
                                hideable: false,
                                lockable: false,
                                tpl: '<a href="#" onclick="spms.common.Detail( {url:\'{Packaging_Url}\', title:\'{Packaging_Name}\'} );">{Packaging_Name}</a>'
                            },
                            {
                                text: '封装方式',
                                width: 120,
                                minWidth: 120,
                                sortable: true,
                                align: 'left',
                                dataIndex: 'Packaging_Name',
                                xtype: 'templatecolumn',
                                hideable: false,
                                lockable: false,
                                tpl: '<a href="#" onclick="spms.common.Detail( {url:\'{Packaging_Url}\', title:\'{Packaging_Name}\'} );">{Packaging_Name}</a>'
                            },
                            {
                                text: '附加说明',
                                width: 240,
                                minWidth: 240,
                                sortable: false,
                                align: 'left',
                                dataIndex: 'Memo',
                                hideable: true,
                                flex: 1
                            }
                        ]
                    }
                );

                //初始化插件事件处理
                InitRowExpanderEventHandler();

                //创建布局
                var card = Ext.create
                (
                    'Ext.panel.Panel',
                    {
                        region: 'center',
                        layout: 'card',
                        border: false,
                        defaults:
                        {
                            border: false
                        },
                        bodyStyle: 'padding:6px',
                        items:
                        [
                            {
                                xtype: 'panel',
                                id: 'spms-card-list',
                                layout: 'border',
                                items:
                                [
                                    search,
                                    grid
                                ]
                            }
                        ]
                    }
                );

                //创建视口
                var viewport = Ext.create
                (
                    'Ext.container.Viewport',
                    {
                        layout: 'border',
                        items:
                        [
                            {
                                region: 'north',
                                contentEl: 'spms-page-title',
                                border: false,
                                height: 48,
                                margins: '0 0 0 0'
                            },
                            toolbar,
                            card
                        ]
                    }
                );

                //加载数据
                store.load();

                //更新按钮状态
                function UpdateButtonState( record )
                {
                    //判断是否选中记录
                    if ( record )
                    {
                        //设置删除按钮状态
                        spms.common.SetEnabled( 'spms-cmd-remove', true );
                        //设置编辑按钮状态
                        spms.common.SetEnabled( 'spms-cmd-edit', true );
                        //设置查看按钮状态
                        spms.common.SetEnabled( 'spms-cmd-view', true );
                    }
                    else
                    {
                        //设置删除按钮状态
                        spms.common.SetEnabled( 'spms-cmd-remove', false );
                        //设置编辑按钮状态
                        spms.common.SetEnabled( 'spms-cmd-edit', false );
                        //设置查看按钮状态
                        spms.common.SetEnabled( 'spms-cmd-view', false );
                    }
                }

                //处理上传图片事件
                function OnUploadImage( grid, rowIndex, colIndex )
                {
                    //获得存储对象
                    var store = grid.getStore();

                    //判断是否有效
                    if ( !spms.common.IsValid( store ) )
                    {
                        //直接返回
                        return;
                    }

                    //获得对应的记录
                    var record = store.getAt( rowIndex );

                    //判断是否有效
                    if ( !spms.common.IsValid( record ) )
                    {
                        //直接返回
                        return;
                    }

                    //上传文件
                    spms.common.UploadFile
                    (
                        {
                            file_types: '*.bmp;*.png;*.jpg;*.jpeg;*.jpe;*.jfif;*.gif',
                            file_types_description: 'Image Files(*.bmp;*.png;*.jpg;*.jpeg;*.jpe;*.jfif;*.gif)',
                            file_size_limit: '2 MB',
                            file_size_limit_tip: '小于2MB的图片文件',
                            callback: OnUploadImageCallback,
                            title: '上传图片',
                            _record: record
                        }
                    );
                }

                //图片上传完成回调
                function OnUploadImageCallback( response, options )
                {
                    //判断是否成功
                    if ( !response.success )
                    {
                        //直接返回
                        return;
                    }

                    //获得记录
                    var record = options._record;

                    //获得上传文件编号
                    if ( response.data && response.data.length > 0 && record )
                    {
                        //获得文件编号
                        var tempFileID = response.data[0];

                        //更新记录
                        record.set( 'File_ID', tempFileID );
                        record.set( 'HasContent', true );
                        record.set( 'IsNew', true );
                    }
                }

                //处理删除图片事件
                function OnDeleteImage( grid, rowIndex, colIndex )
                {
                    //获得存储对象
                    var store = grid.getStore();

                    //获得对应的记录
                    var record = store.getAt( rowIndex );

                    //判断记录是否存在
                    if ( spms.common.IsValid( record ) )
                    {
                        return;
                    }

                    //提示信息
                    Ext.MessageBox.show
                    (
                        {
                            title: spms.resources.text_app_title,
                            msg: '确定要删除名为\"' + record.get( 'File_Title' ) + '\"的图片吗？',
                            buttons: Ext.Msg.YESNO,
                            icon: Ext.Msg.QUESTION,
                            autoScroll: true,
                            closeAction: 'destroy',
                            fn: function ( buttonId, text, eOpts )
                            {
                                //判断是否安装
                                if ( buttonId == 'yes' )
                                {
                                    //判断是否有效
                                    if ( !spms.common.IsValid( store ) )
                                    {
                                        //直接返回
                                        return;
                                    }

                                    //删除对应记录
                                    store.removeAt( rowIndex );
                                }
                            }
                        }
                    );
                }

                //处理查看图片事件
                function OnViewImage( grid, rowIndex, colIndex )
                {
                    //获得存储对象
                    var store = grid.getStore();

                    //获得对应的记录
                    var record = store.getAt( rowIndex );

                    //判断记录是否存在
                    if ( !spms.common.IsValid( record ) )
                    {
                        return;
                    }

                    //判断是否已经上传了图片
                    if ( !record.get( 'HasContent' ) )
                    {
                        //如果没有内容，则直接返回
                        return;
                    }

                    //用于保存参数
                    var params =
                    [
                        { Name: 'File_ID', Value: record.get( 'File_ID' ) },
                        { Name: 'IsNew', Value: record.get( 'IsNew' ) }
                    ];

                    //用于保存参数
                    var options =
                    {
                        url: spms.url.Action( 'GetImage', 'Component', params ),
                        title: record.get( 'File_Title' )
                    };

                    //显示预览
                    spms.common.Preview( options );
                }

                //处理添加图片事件
                function OnAppendImage( sender, eOpts )
                {
                    //获得表格对象
                    var grid = sender.up( 'grid' );

                    //判断是否有效
                    if ( !spms.common.IsValid( grid ) )
                    {
                        //直接返回
                        return;
                    }

                    //获得存储对象
                    var store = grid.getStore();

                    //判断是否有效
                    if ( !spms.common.IsValid( store ) )
                    {
                        //直接返回
                        return;
                    }

                    //添加空白数据
                    store.add
                    (
                        Ext.create
                        (
                            'UploadFile',
                            {
                                File_ID: spms.common.NewGuid(),
                                File_Title: '封装图片',
                                HasContent: false,
                                IsNew: true
                            }
                        )
                    );
                }

                //处理刷新按钮点击事件
                function OnRefresh( sender )
                {
                    //刷新数据
                    Refresh();
                }

                //处理新增按钮点击事件
                function OnAdd( sender )
                {
                    //获得当前对象
                    var me = this;

                    //判断窗体是否已经初始化
                    if ( !spms.common.IsValid( me._Panel_Create ) )
                    {
                        //创建临时文件存储
                        me._Store_TempFiles = Ext.create
                        (
                            'Ext.data.ArrayStore',
                            {
                                autoDestroy: true,
                                model: 'UploadFile'
                            }
                        );

                        //创建新增面板
                        me._Panel_Create = Ext.create
                        (
                            'Ext.panel.Panel',
                            {
                                layout: 'fit',
                                id: 'spms-card-create',
                                cls: 'spms-page-card-detail',
                                border: false,
                                header:
                                {
                                    title: '新增元器件',
                                    border: false,
                                    height: 36,
                                    cls: 'spms-page-card-detail-header'
                                },
                                listeners:
                                {
                                    //挂接显示事件
                                    show: function ( win, eOpts )
                                    {
                                        //获得表单
                                        var form = win.down( 'form' );

                                        //判断是否存在
                                        if ( form )
                                        {
                                            //获得窗体
                                            form.getForm().reset();

                                            //设置焦点
                                            form.down( 'field' ).focus( false, 50 );
                                        }
                                    }
                                },
                                items:
                                [
                                    {
                                        xtype: 'form',
                                        autoScroll: true,
                                        frame: false,
                                        method: 'POST',
                                        waitMsgTarget: true,
                                        waitTitle: spms.resources.text_app_title,
                                        bodyPadding: 12,
                                        bodyCls: 'spms-page-card-detail-form-body',
                                        bodyBorder: false,
                                        border: false,
                                        defaultType: 'textfield',
                                        fieldDefaults:
                                        {
                                            labelAlign: 'left',
                                            labelWidth: 72,
                                            anchor: '100%',
                                            msgTarget: 'qtip'
                                        },
                                        items:
                                        [
                                            {
                                                xtype: 'textfield',
                                                name: 'Component_Name',
                                                maxLength: 40,
                                                fieldLabel: '产品名称',
                                                emptyText: '元器件名称',
                                                allowBlank: false,
                                                disabled: false,
                                                listeners:
                                                {
                                                    blur: function ( control, event, eOpts )
                                                    {
                                                        //获得拼音的保存字段
                                                        var txtDest = control.up( 'form' ).down( '#Component_Code' );

                                                        //获得输入的内容
                                                        var source = control.getValue();

                                                        //判断是否有输入内容
                                                        if ( source && control.isDirty() )
                                                        {
                                                            //转换拼音
                                                            spms.common.ConvertToPinYin( source, txtDest );
                                                        }
                                                    }
                                                }
                                            },
                                            {
                                                xtype: 'textfield',
                                                name: 'Component_Code',
                                                itemId: 'Component_Code',
                                                maxLength: 40,
                                                fieldLabel: '型号规格',
                                                emptyText: '元器件缩写',
                                                allowBlank: false,
                                                disabled: false
                                            },
                                            {
                                                xtype: 'textareafield',
                                                name: 'Memo',
                                                fieldLabel: '附加说明',
                                                emptyText: '备注信息（最长400个字符）',
                                                maxLength: 400,
                                                height: 72,
                                                allowBlank: true,
                                                disabled: false
                                            },
                                            {
                                                xtype: 'fieldcontainer',
                                                fieldLabel: '附加图片',
                                                width: '100%',
                                                defaultType: 'textfield',
                                                layout: 'fit',
                                                padding: 0,
                                                border: 0,
                                                items:
                                                [
                                                    {
                                                        xtype: 'grid',
                                                        height: 240,
                                                        plugins:
                                                        [
                                                           new Ext.grid.plugin.CellEditing
                                                            (
                                                                {
                                                                    clicksToEdit: 1
                                                                }
                                                            )
                                                        ],
                                                        store: me._Store_TempFiles,
                                                        stateful: false,
                                                        border: true,
                                                        cls: 'spms-grid',
                                                        itemId: 'spms-images-grid',
                                                        forceFit: true,
                                                        autoScroll: true,
                                                        columnLines: true,
                                                        enableLocking: false,
                                                        unlockText: spms.resources.text_grid_column_unlock,
                                                        lockText: spms.resources.text_grid_column_lock,
                                                        viewConfig:
                                                        {
                                                            stripeRows: true,
                                                            loadingText: spms.resources.text_loading,
                                                            singleSelect: true
                                                        },
                                                        selModel:
                                                        {
                                                            selType: 'cellmodel'
                                                        },
                                                        bbar:
                                                        [
                                                            {
                                                                xtype: 'button',
                                                                text: '添加附加图片',
                                                                cls: 'spms-page-menu-button',
                                                                iconCls: 'spms-icon-add',
                                                                handler: OnAppendImage
                                                            }
                                                        ],
                                                        listeners:
                                                        {
                                                            select: OnRowSelect
                                                        },
                                                        columns:
                                                        [
                                                            {
                                                                xtype: 'actioncolumn',
                                                                menuDisabled: true,
                                                                text: '操作',
                                                                align: 'center',
                                                                sortable: false,
                                                                hideable: false,
                                                                padding: 0,
                                                                width: 80,
                                                                minWidth: 80,
                                                                items:
                                                                [
                                                                    {
                                                                        iconCls: 'spms-icon-view',
                                                                        tooltip: '查看图片',
                                                                        handler: OnViewImage
                                                                    },
                                                                    {
                                                                        iconCls: 'spms-icon-upload',
                                                                        tooltip: '上传图片',
                                                                        handler: OnUploadImage
                                                                    },
                                                                    {
                                                                        iconCls: 'spms-icon-row-delete',
                                                                        tooltip: '删除图片',
                                                                        handler: OnDeleteImage
                                                                    }
                                                                ]
                                                            },
                                                            {
                                                                text: '是否指定',
                                                                width: 80,
                                                                minWidth: 80,
                                                                sortable: true,
                                                                menuDisabled: true,
                                                                align: 'center',
                                                                dataIndex: 'HasContent',
                                                                renderer: spms.format.booleanRenderer,
                                                                hideable: true
                                                            },
                                                            {
                                                                text: '图片名称',
                                                                width: 200,
                                                                minWidth: 120,
                                                                sortable: false,
                                                                menuDisabled: true,
                                                                align: 'left',
                                                                dataIndex: 'File_Title',
                                                                hideable: false,
                                                                lockable: true,
                                                                editor:
                                                                {
                                                                    xtype: 'textfield',
                                                                    allowBlank: false,
                                                                    maxLength: 40,
                                                                    baseBodyCls: 'spms-cell-editor-textfield'
                                                                }
                                                            },
                                                            {
                                                                text: '图片说明',
                                                                width: 280,
                                                                minWidth: 120,
                                                                sortable: false,
                                                                menuDisabled: true,
                                                                align: 'left',
                                                                dataIndex: 'Memo',
                                                                hideable: false,
                                                                flex: 1,
                                                                editor:
                                                                {
                                                                    xtype: 'textfield',
                                                                    maxLength: 400,
                                                                    baseBodyCls: 'spms-cell-editor-textfield'
                                                                }
                                                            }
                                                        ]
                                                    }
                                                ]
                                            }
                                        ],
                                        dockedItems:
                                        [
                                            {
                                                xtype: 'toolbar',
                                                dock: 'bottom',
                                                ui: 'footer',
                                                cls: 'spms-page-card-detail-toolbar',
                                                padding: '15 0 3 0',
                                                items:
                                                [
                                                    '->',
                                                    {
                                                        text: '连续新增',
                                                        xtype: 'button',
                                                        cls: 'spms-page-card-detail-toolbar-button',
                                                        handler: function ()
                                                        {
                                                            //执行新增操作
                                                            DoAdd.call( me, true );
                                                        }
                                                    },

                                                    {
                                                        text: '新增',
                                                        xtype: 'button',
                                                        cls: 'spms-page-card-detail-toolbar-button',
                                                        handler: function ()
                                                        {
                                                            //执行新增操作
                                                            DoAdd.call( me, false );
                                                        }
                                                    },
                                                    {
                                                        text: '取消',
                                                        xtype: 'button',
                                                        cls: 'spms-page-card-detail-toolbar-button',
                                                        handler: function ()
                                                        {
                                                            //启用工具栏
                                                            toolbar.setDisabled( false );

                                                            //返回一览标签
                                                            card.getLayout().setActiveItem( 'spms-card-list' );
                                                        }
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        );

                        //添加到面板
                        card.add( me._Panel_Create );
                    }

                    //重置临时文件存储
                    ResetTempFileStore( me._Store_TempFiles );

                    //禁用工具栏
                    toolbar.setDisabled( true );

                    //切换到面板
                    card.getLayout().setActiveItem( 'spms-card-create' );
                }

                //处理删除按钮点击事件
                function OnRemove( sender )
                {
                    //判断是否选中记录
                    if ( !spms.common.IsValid( _CurrentRecord ) )
                    {
                        return;
                    }

                    //询问是否确定删除
                    Ext.Msg.show
                    (
                        {
                            title: spms.resources.text_app_title,
                            msg: '确定要删除选中的封装方式"' + _CurrentRecord.get( 'Component_Name' ) + '"吗?',
                            buttons: Ext.Msg.YESNO,
                            icon: Ext.Msg.QUESTION,
                            autoScroll: true,
                            closeAction: 'destroy',
                            fn: function ( button, text, eOpts )
                            {
                                //判断是否确定删除 
                                if ( button == 'yes' )
                                {
                                    //创建请求对象
                                    Ext.Ajax.request
                                    (
                                        {
                                            url: spms.url.Action( 'Delete', 'Component' ),
                                            method: spms.constant.HttpMethod.POST,
                                            jsonData: _CurrentRecord.data,
                                            callback: function ( options, success, response )
                                            {
                                                //处理错误
                                                if ( spms.exception.HandleAjaxRequestError( options, success, response ) )
                                                {
                                                    //刷新数据
                                                    Refresh();
                                                }
                                            }
                                        }
                                    );
                                }
                            }
                        }
                    );
                }

                //处理编辑按钮点击事件
                function OnEdit( sender )
                {
                    //判断是否选中记录
                    if ( !spms.common.IsValid( _CurrentRecord ) )
                    {
                        //如果没有选中记录，则直接返回
                        return;
                    }

                    //获得当前对象
                    var me = this;

                    //判断窗体是否已经初始化
                    if ( typeof me._Panel_Edit == 'undefined' )
                    {
                        //创建临时文件存储
                        me._Store_Files = Ext.create
                        (
                            'Ext.data.Store',
                            {
                                pageSize: 0,
                                autoSync: false,
                                autoLoad: false,
                                root: 'data',
                                remoteFilter: true,
                                remoteSort: false,
                                sorters: [{ property: 'File_Title', direction: 'ASC' }],
                                model: 'UploadFile',
                                proxy:
                                {
                                    type: 'ajax',
                                    batchActions: false,
                                    url: spms.url.Action( 'Images', 'Component' ),
                                    reader:
                                    {
                                        type: 'json',
                                        root: 'data'
                                    },
                                    listeners:
                                    {
                                        //处理代理异常
                                        exception: spms.exception.HandleProxyError
                                    }
                                }
                            }
                        );

                        //创建新增面板
                        me._Panel_Edit = Ext.create
                        (
                            'Ext.panel.Panel',
                            {
                                layout: 'fit',
                                id: 'spms-card-edit',
                                cls: 'spms-page-card-detail',
                                border: false,
                                header:
                                {
                                    title: '编辑元器件',
                                    border: false,
                                    height: 36,
                                    cls: 'spms-page-card-detail-header'
                                },
                                listeners:
                                {
                                    //挂接显示事件
                                    show: function ( panel, options )
                                    {
                                        //获得面板
                                        var panel = me._Panel_Edit;

                                        //获得表单
                                        var form = panel.down( 'form' );

                                        //判断是否存在
                                        if ( spms.common.IsValid( form ) )
                                        {
                                            //重置内容
                                            form.getForm().reset();

                                            //提交数据
                                            form.load
                                            (
                                                {
                                                    url: spms.url.Action( 'Detail', 'Component' ),
                                                    method: spms.constant.HttpMethod.Get,
                                                    params: { Component_ID: _CurrentRecord.get( 'Component_ID' ), Component_Name: _CurrentRecord.get( 'Component_Name' ) },
                                                    waitTitle: spms.resources.text_loading_title,
                                                    waitMsg: spms.resources.text_loading,
                                                    success: function ( panel, action )
                                                    {
                                                        //处理错误
                                                        if ( spms.exception.HandleSuccessError( panel, action ) )
                                                        {
                                                            //设置焦点
                                                            form.down( 'field' ).focus( false, 100 );
                                                        }
                                                        else
                                                        {
                                                            //启用工具栏
                                                            toolbar.setDisabled( false );

                                                            //返回一览标签
                                                            card.getLayout().setActiveItem( 'spms-card-list' );
                                                        }
                                                    },
                                                    failure: function ( form, action )
                                                    {
                                                        //处理错误
                                                        spms.exception.HandleFailureError( form, action );

                                                        //启用工具栏
                                                        toolbar.setDisabled( false );

                                                        //返回一览标签
                                                        card.getLayout().setActiveItem( 'spms-card-list' );
                                                    }
                                                }
                                            );
                                        }
                                    }
                                },
                                items:
                                [
                                    {
                                        xtype: 'form',
                                        autoScroll: true,
                                        frame: false,
                                        method: 'POST',
                                        waitMsgTarget: true,
                                        waitTitle: spms.resources.text_app_title,
                                        bodyPadding: 12,
                                        bodyCls: 'spms-page-card-detail-form-body',
                                        bodyBorder: false,
                                        border: false,
                                        defaultType: 'textfield',
                                        fieldDefaults:
                                        {
                                            labelAlign: 'left',
                                            labelWidth: 72,
                                            anchor: '100%',
                                            msgTarget: 'qtip'
                                        },
                                        items:
                                        [
                                            {
                                                xtype: 'hiddenfield',
                                                name: 'Component_ID'
                                            },
                                            {
                                                xtype: 'textfield',
                                                name: 'Component_Name',
                                                maxLength: 40,
                                                fieldLabel: '产品名称',
                                                emptyText: '元器件名称',
                                                allowBlank: false,
                                                disabled: false,
                                                listeners:
                                                {
                                                    blur: function ( control, event, eOpts )
                                                    {
                                                        //获得拼音的保存字段
                                                        var txtDest = control.up( 'form' ).down( '#Component_Code' );
                                           
                                                        //获得输入的内容
                                                        var source = control.getValue();

                                                        //判断是否有输入内容
                                                        if ( source && control.isDirty() )
                                                        {
                                                            //转换拼音
                                                            spms.common.ConvertToPinYin( source, txtDest );
                                                        }
                                                    }
                                                }
                                            },
                                            {
                                                xtype: 'textfield',
                                                name: 'Component_Code',
                                                itemId: 'Component_Code',
                                                maxLength: 40,
                                                fieldLabel: '型号规格',
                                                emptyText: '元器件缩写',
                                                allowBlank: false,
                                                disabled: false
                                            },
                                            {
                                                xtype: 'textareafield',
                                                name: 'Memo',
                                                fieldLabel: '附加说明',
                                                emptyText: '备注信息（最长400个字符）',
                                                maxLength: 400,
                                                height: 72,
                                                allowBlank: true,
                                                disabled: false
                                            },
                                            {
                                                xtype: 'fieldcontainer',
                                                fieldLabel: '附加图片',
                                                width: '100%',
                                                defaultType: 'textfield',
                                                layout: 'fit',
                                                padding: 0,
                                                border: 0,
                                                items:
                                                [
                                                    {
                                                        xtype: 'grid',
                                                        height: 240,
                                                        plugins:
                                                        [
                                                           new Ext.grid.plugin.CellEditing
                                                               (
                                                                   {
                                                                       clicksToEdit: 1
                                                                   }
                                                               )
                                                        ],
                                                        store: me._Store_Files,
                                                        stateful: false,
                                                        border: true,
                                                        cls: 'spms-grid',
                                                        itemId: 'spms-images-grid',
                                                        forceFit: true,
                                                        autoScroll: true,
                                                        columnLines: true,
                                                        enableLocking: false,
                                                        unlockText: spms.resources.text_grid_column_unlock,
                                                        lockText: spms.resources.text_grid_column_lock,
                                                        viewConfig:
                                                        {
                                                            stripeRows: true,
                                                            loadingText: spms.resources.text_loading,
                                                            singleSelect: true
                                                        },
                                                        selModel:
                                                        {
                                                            selType: 'cellmodel'
                                                        },
                                                        bbar:
                                                        [
                                                            {
                                                                xtype: 'button',
                                                                text: '添加附加图片',
                                                                cls: 'spms-page-menu-button',
                                                                iconCls: 'spms-icon-add',
                                                                handler: OnAppendImage
                                                            }
                                                        ],
                                                        listeners:
                                                        {
                                                            select: OnRowSelect
                                                        },
                                                        columns:
                                                        [
                                                            {
                                                                xtype: 'actioncolumn',
                                                                menuDisabled: true,
                                                                text: '操作',
                                                                align: 'center',
                                                                sortable: false,
                                                                hideable: false,
                                                                padding: 0,
                                                                width: 80,
                                                                minWidth: 80,
                                                                items:
                                                                [
                                                                    {
                                                                        iconCls: 'spms-icon-view',
                                                                        tooltip: '查看图片',
                                                                        handler: OnViewImage
                                                                    },
                                                                    {
                                                                        iconCls: 'spms-icon-upload',
                                                                        tooltip: '上传图片',
                                                                        handler: OnUploadImage
                                                                    },
                                                                    {
                                                                        iconCls: 'spms-icon-row-delete',
                                                                        tooltip: '删除图片',
                                                                        handler: OnDeleteImage
                                                                    }
                                                                ]
                                                            },
                                                            {
                                                                text: '是否指定',
                                                                width: 80,
                                                                minWidth: 80,
                                                                sortable: true,
                                                                menuDisabled: true,
                                                                align: 'center',
                                                                dataIndex: 'HasContent',
                                                                renderer: spms.format.booleanRenderer,
                                                                hideable: true
                                                            },
                                                            {
                                                                text: '图片名称',
                                                                width: 200,
                                                                minWidth: 120,
                                                                sortable: true,
                                                                menuDisabled: false,
                                                                align: 'left',
                                                                dataIndex: 'File_Title',
                                                                hideable: false,
                                                                lockable: true,
                                                                editor:
                                                                {
                                                                    xtype: 'textfield',
                                                                    allowBlank: false,
                                                                    maxLength: 40,
                                                                    baseBodyCls: 'spms-cell-editor-textfield'
                                                                }
                                                            },
                                                            {
                                                                text: '图片说明',
                                                                width: 280,
                                                                minWidth: 120,
                                                                sortable: false,
                                                                menuDisabled: true,
                                                                align: 'left',
                                                                dataIndex: 'Memo',
                                                                hideable: false,
                                                                flex: 1,
                                                                editor:
                                                                {
                                                                    xtype: 'textfield',
                                                                    maxLength: 400,
                                                                    baseBodyCls: 'spms-cell-editor-textfield'
                                                                }
                                                            }
                                                        ]
                                                    }
                                                ]
                                            }
                                        ],
                                        dockedItems:
                                        [
                                            {
                                                xtype: 'toolbar',
                                                dock: 'bottom',
                                                ui: 'footer',
                                                cls: 'spms-page-card-detail-toolbar',
                                                padding: '15 0 3 0',
                                                items:
                                                [
                                                    '->',
                                                    {
                                                        text: '保存',
                                                        xtype: 'button',
                                                        cls: 'spms-page-card-detail-toolbar-button',
                                                        handler: function ()
                                                        {
                                                            //获得表单
                                                            var form = me._Panel_Edit.down( 'form' );

                                                            //获得存储对象
                                                            var filesStore = me._Store_Files;

                                                            //用于记录需要提交的数据
                                                            var params = [];

                                                            //循环收集需要提交的数据
                                                            for ( var index = 0; index < filesStore.getCount() ; index++ )
                                                            {
                                                                //获得记录
                                                                var model = filesStore.getAt( index );

                                                                //添加模型
                                                                params.push( model.getData() );
                                                            }

                                                            //判断表单是否有效
                                                            if ( form )
                                                            {
                                                                //获得表单对象
                                                                var formBase = form.getForm();

                                                                //检查数据是否合法
                                                                if ( formBase.isValid() )
                                                                {
                                                                    //提交数据
                                                                    formBase.submit
                                                                    (
                                                                        {
                                                                            url: spms.url.Action( 'Update', 'Component' ),
                                                                            method: spms.constant.HttpMethod.Post,
                                                                            params: { Images: JSON.stringify( params ) },
                                                                            submitEmptyText: false,
                                                                            waitTitle: spms.resources.text_submitting_title,
                                                                            waitMsg: spms.resources.text_submitting,
                                                                            success: function ( panel, action )
                                                                            {
                                                                                //处理提交错误
                                                                                if ( spms.exception.HandleSuccessError( panel, action ) )
                                                                                {
                                                                                    //启用工具栏
                                                                                    toolbar.setDisabled( false );

                                                                                    //返回一览标签
                                                                                    card.getLayout().setActiveItem( 'spms-card-list' );

                                                                                    //刷新数据
                                                                                    Refresh();
                                                                                }
                                                                            },
                                                                            failure: spms.exception.HandleFailureError
                                                                        }
                                                                    );
                                                                }
                                                            }
                                                        }
                                                    },
                                                    {
                                                        text: '取消',
                                                        xtype: 'button',
                                                        cls: 'spms-page-card-detail-toolbar-button',
                                                        handler: function ()
                                                        {
                                                            //启用工具栏
                                                            toolbar.setDisabled( false );

                                                            //返回一览标签
                                                            card.getLayout().setActiveItem( 'spms-card-list' );
                                                        }
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        );

                        //添加到面板
                        card.add( me._Panel_Edit );
                    }

                    //禁用工具栏
                    toolbar.setDisabled( true );

                    //切换到面板
                    card.getLayout().setActiveItem( 'spms-card-edit' );

                    //加载数据
                    me._Store_Files.load( { params: { 'Component_ID': _CurrentRecord.get( 'Component_ID' ) } } );
                }

                //处理查看按钮点击事件
                function OnView( sender )
                {
                    //判断是否选中记录
                    if ( !spms.common.IsValid( _CurrentRecord ) )
                    {
                        //如果没有选中记录，则直接返回
                        return;
                    }

                    //获得记录序号
                    var index = store.indexOf( _CurrentRecord );

                    //展开
                    plugin.expand( index, _CurrentRecord );
                }

                //重置临时文件存储
                function ResetTempFileStore( store )
                {
                    //清除所有数据
                    store.removeAll( false );

                    //添加默认数据
                    store.add
                    (
                        Ext.create
                        (
                            'UploadFile',
                            {
                                File_ID: spms.common.NewGuid(),
                                File_Title: '封装尺寸图',
                                HasContent: false,
                                IsNew: true
                            }
                        )
                    );

                    //添加默认数据
                    store.add
                    (
                        Ext.create
                        (
                            'UploadFile',
                            {
                                File_ID: spms.common.NewGuid(),
                                File_Title: '封装实物照片',
                                HasContent: false,
                                IsNew: true
                            }
                        )
                    );
                }

                //处理表格行选中事件
                function OnRowSelect( grid, record, index, options )
                {
                    //记录当前选中记录
                    _CurrentRecord = record;

                    //更新按钮状态
                    UpdateButtonState( _CurrentRecord );
                }

                //Ajax回调
                function OnAjaxRequestCallback( options )
                {
                    //刷新数据
                    Refresh();
                }

                //刷新数据
                function Refresh( options )
                {
                    //收缩所有展开的行
                    plugin.collapseAll();

                    //刷新数据
                    store.load( options );
                }

                //执行新增操作
                function DoAdd( isContinuousNew )
                {
                    //获得当前对象
                    var me = this;

                    //获得表单
                    var form = me._Panel_Create.down( 'form' );

                    //获得存储对象
                    var storeTempFiles = me._Store_TempFiles;

                    //用于记录需要提交的数据
                    var params = [];

                    //循环收集需要提交的数据
                    for ( var index = 0; index < storeTempFiles.getCount() ; index++ )
                    {
                        //获得记录
                        var model = storeTempFiles.getAt( index );

                        //判断是否设置了内容
                        if ( model.get( 'HasContent' ) )
                        {
                            //添加模型
                            params.push( model.getData() );
                        }
                    }

                    //判断表单是否有效
                    if ( form )
                    {
                        //获得表单对象
                        var formBase = form.getForm();

                        //检查数据是否合法
                        if ( formBase.isValid() )
                        {
                            //提交数据
                            formBase.submit
                            (
                                {
                                    url: spms.url.Action( 'Create', 'Component' ),
                                    method: spms.constant.HttpMethod.Post,
                                    params: { Images: JSON.stringify( params ) },
                                    submitEmptyText: false,
                                    waitTitle: spms.resources.text_submitting_title,
                                    waitMsg: spms.resources.text_submitting,
                                    success: function ( panel, action )
                                    {
                                        //处理提交错误
                                        if ( spms.exception.HandleSuccessError( panel, action ) )
                                        {
                                            //判断是否连续新增
                                            if ( isContinuousNew )
                                            {
                                                //重置表单
                                                panel.reset();

                                                //设置焦点
                                                form.down( 'field' ).focus( false, 50 );
                                            }
                                            else
                                            {
                                                //启用工具栏
                                                toolbar.setDisabled( false );

                                                //返回一览标签
                                                card.getLayout().setActiveItem( 'spms-card-list' );

                                                //刷新数据
                                                Refresh();
                                            }
                                        }
                                    },
                                    failure: spms.exception.HandleFailureError
                                }
                            );
                        }
                    }
                }

                //初始化RowExpander插件事件处理
                function InitRowExpanderEventHandler()
                {
                    //创建参数
                    var _options =
                    {
                        url: spms.url.Action( 'DetailView', 'Component' ),
                        isForceReload: true,
                        maskTarget: grid,
                        height: 410
                    };

                    //绑定行展开事件
                    grid.view.on( 'expandbody', spms.event.GetRowExpandEventHandler( _options ) );
                    //绑定行收缩事件
                    grid.view.on( 'collapsebody', spms.event.GetRowCollapseEventHandler( _options ) );
                }
            }
        );

    </script>
}